<template>
	<!-- about -->
	<div class="about">
		<a class="bg_links social portfolio" href="https://gitee.com/siri729_admin/node-mysql-backend" target="_blank">
			<span class="icon"></span>
		</a>
		<!--    <a class="bg_links social dribbble" href="" target="_blank">-->
		<!--      <span class="icon"></span>-->
		<!--    </a>-->
		<!--    <a class="bg_links social linkedin" href="" target="_blank">-->
		<!--      <span class="icon"></span>-->
		<!--    </a>-->
		<a class="bg_links logo"></a>
	</div>
	<!-- end about -->

	<nav>
		<div class="menu">
			<p class="website_name">{{ appName || "Vite Vue3 Admin" }}</p>

			<div class="menu_icon">
				<span class="icon"></span>
			</div>
		</div>
	</nav>

	<section class="wrapper">
		<div class="container h-full">
			<div id="scene" class="scene" data-hover-only="false">
				<div class="circle" data-depth="1.2"></div>

				<div class="one" data-depth="0.9">
					<div class="content">
						<span class="piece"></span>
						<span class="piece"></span>
						<span class="piece"></span>
					</div>
				</div>

				<div class="two" data-depth="0.60">
					<div class="content">
						<span class="piece"></span>
						<span class="piece"></span>
						<span class="piece"></span>
					</div>
				</div>

				<div class="three" data-depth="0.40">
					<div class="content">
						<span class="piece"></span>
						<span class="piece"></span>
						<span class="piece"></span>
					</div>
				</div>

				<p class="p404" data-depth="0.50">404</p>
				<p class="p404" data-depth="0.10">404</p>
			</div>

			<div class="text">
				<article>
					<p>非常抱歉,您要找的资源好像跑丢了,要不去看看别的吧~</p>
					<button @click="router.replace(HOME_URL)">好的!</button>
				</article>
			</div>
		</div>
	</section>
</template>

<script setup>
import { $themeConfig } from "@/@CORE/app-config";
import { HOME_URL } from "@CORE/app-config/config";
const router = useRouter();

const {
	app: { appName }
} = $themeConfig;
</script>

<style src="./styles/style.css" scoped></style>
